@import "global";
@import "color";

::-webkit-scrollbar {
  width: @space;
  height: @space;
  background-color: @grey;

  &-track {
    background-color: @grey;
    border-radius: @radius-s;
    -webkit-box-shadow: inset 0 0 @radius-s rgba(0, 0, 0, 0);
    &:hover {
      -webkit-box-shadow: inset 0 0 @radius-s rgba(0, 0, 0, .5);
      background-color: @active-color;
    }
    &:active {
      -webkit-box-shadow: inset 0 0 @radius-s rgba(0, 0, 0, 1);
      background-color: @active-color;
    }
  }

  &-thumb {
    background-color: rgba(0, 0, 0, .2);
    border-radius: @radius-s;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
    &:hover {
      background-color: rgba(0, 0, 0, .4);
      -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
    }
    &:active {
      background: rgba(0, 0, 0, .6);
    }
  }
}
